<template>
  <el-form-item
    :label="getFirst.label"
    :prop="props.getKey"
    :rules="getFirst.rules"
  >
    <component
      v-for="(item, index) in getFirst.intType"
      :key="index"
      :is="componentsList[item.componentType]"
      :getKey="props.getKey"
      :getValue="item.bindValue"
      :getType="item.componentType"
      :disabled="props.disabled"
    />
  </el-form-item>
</template>
<script lang="ts" setup>
import { markRaw, reactive, inject, watch } from 'vue';
import { defaultObjType, anyObj } from '../utils/indexType';

// 引入组件
import inputEl from './intcomponents/intput.vue';
import inputNumEl from './intcomponents/inputNum.vue';
// 创建组件数组
const componentsList = reactive<defaultObjType>({
  input: markRaw(inputEl),
  textarea: markRaw(inputEl),
  inputNum: markRaw(inputNumEl),
});
// 传入值
const props = defineProps({
  getKey: {
    type: String,
    default: () => {
      return ['input'];
    },
  },
  disabled: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

// 接收值
// @ts-ignore
const getFirst = inject<anyObj>('testConfig')[props.getKey].elItemConfig;
</script>
